<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Modifica articolo</title>
<link href="css/juego.css" rel="stylesheet" type="text/css">
</head>

<script type="text/javascript">
	window.onbeforeunload = cerrarConexiones;
	var websocketPreguntas = new WebSocket(
			"ws://localhost:8080/ProyectoPabloWebSockets/preguntasWebSockets");
	websocketPreguntas.onmessage = function processMessagePreguntas(message) {
		recibirPregunta(message);
	}
	var websocketJugadores = new WebSocket(	"ws://localhost:8080/ProyectoPabloWebSockets/jugadoresWebSockets");
	websocketJugadores.onmessage = function processMessageJugadores(message) {
		controlJugadores(message);
	}
	function cerrarConexiones() {
		websocketPreguntas.close();
		websocketJugadores.close();
	}
	//Esta funcion permite clonar el div que contiene la puntuacion para cada usuario
	function clonarInfoJugador(nomNuevoJugador, puntuacion) {
		var DIVplantilla = document.getElementById('DIVpuntuacionYo');
		var clonElemento = DIVplantilla.cloneNode(true);
		clonElemento.children[0].children[0].innerText = nomNuevoJugador;
		clonElemento.children[0].children[2].id = 'SPANpuntuacion'+ nomNuevoJugador;
		clonElemento.children[0].children[2].innerText = puntuacion;
		DIVplantilla.parentNode.appendChild(clonElemento);
	}
	
	
	function controlJugadores(message) {
		//Esto es cierto justo despues de conectar
		if (message.data == "conectado") {
			nombreusuario = hiddenNombreJugador.value;
			numeroTotalJugadores = hiddenNumeroJugadores.value;
			websocketJugadores.send(nombreusuario + ";" + numeroTotalJugadores);
		} else {
			debugger;
			var jsonData = JSON.parse(message.data);
			if (jsonData.listaJugadores != null) {
				var i = 0;
				var miNombre = hiddenNombreJugador.value;
				while (i < jsonData.listaJugadores.length) {
					var nomJu = jsonData.listaJugadores[i];
					var punJu = jsonData.listaPuntuaciones[i];
					if (nomJu != miNombre) {
						clonarInfoJugador(nomJu, punJu);
					}
					i++;
				}
				if (jsonData.solicitante !=null && jsonData.solicitante == hiddenNombreJugador.value){
					solicitarPregunta();
				}

			} else {
				var textoEstadoRespuesta = '';
				if (jsonData.nomJugador != null && jsonData.nomJugador != '') {
					textoEstadoRespuesta += 'El jugador ' + jsonData.nomJugador;
					if (jsonData.acertadoFallado != null
							&& jsonData.acertadoFallado != '') {
						textoEstadoRespuesta += ' ha '
								+ jsonData.acertadoFallado;
						TextAreaEstadoRespuestas.value += '\n'
								+ textoEstadoRespuesta;
						if (jsonData.puntuacion != null
								&& jsonData.puntuacion != '') {
							actualizarPuntuacion(jsonData.nomJugador,
									jsonData.puntuacion);
						}
					}
					if (jsonData.solicitar != null	&& jsonData.solicitar == 'SI') {
						TextAreaEstadoRespuestas.value += '\nLa respuesta correcta era la '
								+ hiddenRespuesta.value;
						if (jsonData.solicitante !=null && jsonData.solicitante == hiddenNombreJugador.value){
							solicitarPregunta();
						}
						
					}
					debugger;
					if (jsonData.ganador != null && jsonData.ganador != ''
							&& jsonData.ganador == 'SI') {
						alert("El jugador " + jsonData.nomJugador
								+ " ha ganado el juego");
					}

				}
			}

		}

	}

	function solicitarPregunta() {
		websocketPreguntas.send("");
	}
	function actualizarPuntuacion(nomJug, punt) {
		var SpanPuntuacion = document.getElementById('SPANpuntuacion' + nomJug).innerText = punt;
	}
	function mostrarPregunta(letraPregunta, contenidoPregunta) {
		document.getElementById('DIVrespuesta' + letraPregunta).style.display = 'block';
		document.getElementById('H3respuesta' + letraPregunta).innerText = contenidoPregunta;
	}
	function ocultarPregunta(letraPregunta) {
		document.getElementById('DIVrespuesta' + letraPregunta).style.display = 'none';
		document.getElementById('H3respuesta' + letraPregunta).innerText = '';
	}
	function recibirPregunta(message) {
		var jsonData = JSON.parse(message.data);
		if (jsonData.cabeceraEnunciado != null) {
			mostrarPregunta('CabeceraEnunciado', jsonData.cabeceraEnunciado);
		} else {
			ocultarPregunta('CabeceraEnunciado');
		}
		if (jsonData.enunciado != null) {
			var enunciadoSinSaltosNiEspacios = jsonData.enunciado.replace(
					/\n\r\s/g, "");
			if (enunciadoSinSaltosNiEspacios != "") {
				var enuncioadoConSaltos = jsonData.enunciado;
				var enunciadoSinSaltos = enuncioadoConSaltos.replace(/\n/g,
						"/salto/");
				IFRAMEcodigo.style.display = 'block';
				IFRAMEcodigo.src = "codigoFuente.jsp?codigoFuente="
						+ enunciadoSinSaltos;
			} else {
				IFRAMEcodigo.style.display = 'none';
			}
		} else {
			IFRAMEcodigo.style.display = 'none';
		}
		if (jsonData.a != null && jsonData.a != '') {
			mostrarPregunta('A', jsonData.a);
		} else {
			ocultarPregunta('A');
		}
		if (jsonData.b != null && jsonData.b != '') {
			mostrarPregunta('B', jsonData.b);
		} else {
			ocultarPregunta('B');
		}
		if (jsonData.c != null && jsonData.c != '') {
			mostrarPregunta('C', jsonData.c);
		} else {
			ocultarPregunta('C');
		}
		if (jsonData.d != null) {
			mostrarPregunta('D', jsonData.d);
		} else {
			ocultarPregunta('D');
		}
		if (jsonData.e != null && jsonData.e != '') {
			mostrarPregunta('E', jsonData.e);
		} else {
			ocultarPregunta('E');
		}
		if (jsonData.f != null && jsonData.f != '') {
			mostrarPregunta('F', jsonData.f);
		} else {
			ocultarPregunta('F');
		}
		if (jsonData.respuestaCorrecta != null) {
			var respuestaCorrectaEntera = jsonData.respuestaCorrecta.replace(
					/\s/g, "");
			var respuestaCorrectaSoloLetras = respuestaCorrectaEntera
					.split(':')[1];
			H3respuesta.innerText = respuestaCorrectaSoloLetras;
			hiddenRespuesta.value = respuestaCorrectaSoloLetras;
		}
		if (jsonData.numPreg != null && jsonData.numPreg != '') {
			hiddenNumPreg.value = jsonData.numPreg;
			TextAreaEstadoRespuestas.value += '\n----------' + jsonData.numPreg
					+ '----------';
		}

		CheckA.checked = '';
		CheckB.checked = '';
		CheckC.checked = '';
		CheckD.checked = '';
		CheckE.checked = '';
		CheckF.checked = '';

		ButtonResponder.disabled = false;

	}
	function responder(respuesta) {
		var listaCheck = document.getElementsByTagName('input');
		var cadenaMarcados = '';
		ButtonResponder.disabled = true;
		for (i = 0; i < listaCheck.length; i++) {
			var tipo = listaCheck[i].type;
			if (tipo == 'checkbox') {
				var valor = listaCheck[i].value;
				var marcado = listaCheck[i].checked;
				if (marcado == true) {
					if (cadenaMarcados.length > 0) {
						cadenaMarcados += ',';
					}
					cadenaMarcados += valor;
				}
			}
		}
		var arrayRespuestasValidas = H3respuesta.innerText.split(',');
		var arrayRespuestasMarcadas = cadenaMarcados.split(',');
		var acertado = true;
		if (arrayRespuestasValidas.length == arrayRespuestasMarcadas.length) {
			for (i = 0; i < arrayRespuestasValidas.length; i++) {
				var respuestaValida = arrayRespuestasValidas[i];
				encontrado = false;
				for (j = 0; j < arrayRespuestasMarcadas.length; j++) {
					var respuestaMarcada = arrayRespuestasMarcadas[j];
					if (respuestaValida == respuestaMarcada) {
						encontrado = true;
						break;
					}
				}
				if (encontrado == false) {
					acertado = false;
					break;
				}
			}
		} else {
			acertado = false;
		}
		var numeroPregunta = hiddenNumPreg.value;

		if (acertado) {
			websocketJugadores.send(numeroPregunta + ";" + 'acertada');
		} else {
			websocketJugadores.send(numeroPregunta + ";" + 'fallada');
		}
	}
</script>
<body>
<jsp:include page="cabecera.jsp" />
<div id="DIVcontenedor">
	<div id="DIVpuntuaciones">
			<div id="DIVcontenedorUsuariosPuntuaciones">
				<div id="DIVpuntuacionYo" class="DIVnombrePuntuacion">
					<h2 class="H2nombreJugador">
						<span class="SPANnombreJugador">
							${param.hiddenNombreJugador}</span> 							
							<img class="imgPuntos"
							src="img/JavaBlue.png"> <span
							id="SPANpuntuacion${param.hiddenNombreJugador}">0</span>
					</h2>
				</div>
			</div>			
		<input type="button" onclick="solicitarPregunta();" value="solicitar" style="display: none;">
		<h3 id="H3respuesta"></h3>
		<textarea id="TextAreaEstadoRespuestas" >
		
		</textarea>
		
		
	</div>
	<div id="DIVpregunta">
	<div id="DIVrespuestaCabeceraEnunciado" class="DIVrespuesta">
			<h3 id="H3respuestaCabeceraEnunciado" class="H3Enunciado"> </h3>
	</div>
	
	<iframe id="IFRAMEcodigo" src=""></iframe>
		
		<div id="DIVrespuestaA" class="DIVrespuesta">
		<input id="CheckA" type="checkbox" class="CheckRespuesta" value='A'>
			<h3 id="H3respuestaA"  class="H3respuesta"> </h3>
		</div>
		<div id="DIVrespuestaB" class="DIVrespuesta">
		<input id="CheckB" type="checkbox" class="CheckRespuesta" value='B'>
			<h3 id="H3respuestaB" class="H3respuesta"> </h3>
		</div>
		<div id="DIVrespuestaC" class="DIVrespuesta" >
		<input id="CheckC" type="checkbox" class="CheckRespuesta" value='C'>
			<h3 id="H3respuestaC" class="H3respuesta" > </h3>
		</div>
		<div id="DIVrespuestaD" class="DIVrespuesta">
		<input id="CheckD" type="checkbox" class="CheckRespuesta" value='D'>
			<h3 id="H3respuestaD"  class="H3respuesta" > </h3>
		</div>
		<div id="DIVrespuestaE" class="DIVrespuesta">
		<input id="CheckE" type="checkbox" class="CheckRespuesta" value='E'>
			<h3 id="H3respuestaE" class="H3respuesta" > </h3>
		</div>
		<div id="DIVrespuestaF" class="DIVrespuesta">
		<input id="CheckF" type="checkbox" class="CheckRespuesta" value='F'>
			<h3 id="H3respuestaF" class="H3respuesta" > </h3>
		</div>
		<div id="DIVboton">
			<input id="ButtonResponder" type="button" onclick="responder();" value="responder" disabled>
		</div>
		
	</div>
	<input type="hidden" id="hiddenNombreJugador"
		name="hiddenNombreJugador" value="${param.hiddenNombreJugador}">
	<input type="hidden" id="hiddenNumeroJugadores"
		name="hiddenNumeroJugadores" value="${param.hiddenNumeroJugadores}">
	<input type="hidden" id="hiddenNumPreg"
		name="hiddenNumPreg" value="${param.hiddenNumeroJugadores}">
		<input type="hidden" id="hiddenRespuesta"
		name="hiddenRespuesta" value="${param.hiddenNumeroJugadores}">
	
</div>
</body>
</html>